<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table 模块快速使用</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/layuimini/css/public.css" media="all">
   <style>

    </style>
</head>
<body>
<script src="/static/layui/layui.js"></script>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加Mysql监控 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除Mysql监控 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">

            {% verbatim %}
                {{# if(d.status == 1){ }}
                <a class="layui-btn layui-btn-normal layui-btn-sm layui-btn-warm" lay-event="disable">禁用</a>
                {{# } }}
            {% endverbatim %}

            {% verbatim %}
                {{# if(d.status == 0){ }}
                <a class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="enable">启用</a>
                {{# } }}
            {% endverbatim %}

            <a class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">删除</a>
        </script>

        <script type="text/html" id="ChartShow">
            {% verbatim %}
                <a href="/dbmonitor/mysql_detail?id={{d.id}}" class="layui-table-link" target="_blank">图表展示</a>
            {% endverbatim %}
        </script>

        <script type="text/html" id="SlowShow">
            {% verbatim %}
                <a href="/dbmonitor/mysql_slowlog?id={{d.id}}" class="layui-table-link" target="_blank">慢查询</a>
            {% endverbatim %}
        </script>

        <script type="text/html" id="ChartStatus">
            {% verbatim %}
                {{# if(d.status == 1){ }}
                <a class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="disable">启用</a>
                {{# } }}

                {{# if(d.status == 0){ }}
                <a class="layui-btn layui-btn-normal layui-btn-sm layui-btn-warm" lay-event="disable">禁用</a>
                {{# } }}

            {% endverbatim %}
        </script>


        <div id="django-webssh-terminal" class="hide">
            <div id="terminal"></div>
        </div>
    </div>
</div>

<script>
layui.use(['form', 'table','element'], function() {
    var table = layui.table,
        form = layui.form,
        $ = layui.jquery;
    //第一个实例
    table.render({
        elem: '#currentTableId'
        //,height: 'full-500'
        , url: '/dbmonitor/api_dblist/' //数据接口
        //, width: '100%'
        , toolbar: '#toolbarDemo'
        , defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
        }]
        ,cellMinWidth: 80
        ,id: 'idTest'
        ,scrollbar: true
        , page: true //开启分页
        , cols: [[ //表头
            {type: "checkbox",checkbox:true}
            , {field: 'id', title: 'ID', align: "center"}
            , {field: 'dbname', title: '数据库名称',minWidth:100,align: "center"}
            , {field: 'username', title: '用户名', align: "center"}
            , {field: 'ip', title: 'IP(域名)',minWidth:150, align: "center"}
            , {field: 'port', title: '端口', align: "center"}
            , {field: 'charset', title: '编码',align: "center"}
            , {field: 'mysql_master_slave', title: '类别', align: "center"}
            , {field: 'Slave_IO_Running', title: 'IO线程', align: "center"}
            , {field: 'Slave_SQL_Running', title: 'SQL线程',minWidth:150, align: "center"}
            , {field: 'utime', title: '更新时间',minWidth:150, align: "center"}
            , {field: 'chartshow', title: '图表展示',minWidth:100,templet: '#ChartShow', align: "center"}
            , {field: 'slowshow', title: '慢查询',minWidth:100,templet: '#SlowShow', align: "center"}
            , {field: 'status', title: '启用状态',minWidth:100,templet: '#ChartStatus', align: "center"}
            , {field: 'classify', title: '操作', toolbar: '#currentTableBar',minWidth:280, align: "center"}
        ]],
        limits: [10, 15, 20, 25, 50, 100],
        limit: 15,
        skin: 'even',
        //size: 'lg'
    })
    //table.resize('idTest');

    /**
     * toolbar事件监听
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
        if (obj.event === 'add') {   // 监听添加操作

            layer.open({
                title: '添加监控项',
                type: 2, // 1:页面层 2: ifream层
                shade: 0.2,
                maxmin: false,
                shadeClose: true,
                area: ['90%', '80%'],
                //offset: [openWH[2] + 'px', openWH[3] + 'px'],
                content: '/static/layuimini/page/table/add_mysql.html',
                success : function(layero, index) {
                    var iframe = layero.find('iframe')[0].contentWindow;
                    var body = layer.getChildFrame('body', index);
                    //解决select无法传值
                    iframe.layui.form.render('select');

                }
            });


        } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                alert(JSON.stringify(checkStatus));

                ///
                layer.confirm('确定要删除吗', {
                    btn: ['确定', '取消'],
                    btn1: function () {
                        $.each(data, function (index, item) {
                            var id = item.id;
                            $.ajax({
                                url: '/dbmonitor/mysqldb_delete/',
                                type: 'POST',
                                data: {"mysql_id": id},
                                success: function (res) {
                                    //layer.alert(res.msg);
                                    //layer.close(index);
                                    window.location.reload();
                                }
                            })
                        });
                    },
                    btn2: function () {
                        layer.close(layer.index);
                    }
                })


                ///
            }
    });
    // 监听编辑事件
    table.on('tool(currentTableFilter)', function (obj) {
        if (obj.event === 'edit') {   // 监听编辑操作
            var id = obj.data.id;
            $.ajax(
                {
                    url: '/dbmonitor/monitorconfig_edit/',
                    type: 'get',
                    data: {"id":id},
                    success: function (data) {
                        layer.open({
                            title: '监控项编辑',
                            type: 2, // 1:页面层 2: ifream层
                            shade: 0.2,
                            maxmin: false,
                            shadeClose: true,
                            area: ['90%', '80%'],
                            //offset: [openWH[2] + 'px', openWH[3] + 'px'],
                            content: '/static/layuimini/page/table/monitor_edit.html',
                            //scrollbar: true,
                            btn:['确认提交'],
                            success : function(layero, index) {

                                var iframe = layero.find('iframe')[0].contentWindow;
                                //var iframeWin = layero.find('iframe')[0].contentWindow;
                                var body = layer.getChildFrame('body', index);

                                //ID
                                body.find('#id').val(data.id);

                                //名称
                                body.find('#name').val(data.name);

                                //告警组
                                iframe.test.method1(data.linkgroup_list);

                                //告警方式
                                iframe.test.method2(data.allist);

                                //自愈状态
                                iframe.test.method3(data.alert_status);

                                //解决select无法传值
                                //iframe.layui.form.render('select');
                                iframe.layui.form.render();
                                //更新表单数据
                                //iframeWin.layui.form.render();

                            },
                            end: function() {
                                window.location.reload();//写在这里的话不管是否提交成功都会刷新这个页面
                                return false;
                            },
                            yes:function (index,layero) {
                                var newsForm = layer.getChildFrame('#userForm', index);
                                var dataForm = newsForm.serialize();
                                dataForm = decodeURIComponent(dataForm,true);//添加的表单数据
                                $.ajax({
                                    url: '/devops/autorecovery_edit/',
                                    type: 'POST',
                                    data: dataForm,
                                    success: function (res) {
                                        layer.alert(res.msg);
                                        //var index = parent.layer.getFrameIndex(window.name);
                                        //parent.layer.close(index);
                                        layer.close(index);
                                    }
                                })
                                //});

                            }
                        });
                }
             });

        } else if (obj.event === 'delete'){
            var id = obj.data.id;
            layer.confirm('确定要删除吗', {
                btn: ['确定', '取消'],
                btn1: function () {
                    $.ajax(
                        {
                            url: '/dbmonitor/mysqldb_delete/',
                            type: 'POST',
                            data: {"mysql_id": id},
                            success: function (data) {
                                layer.close(layer.index);
                                window.location.reload();
                            }
                        }
                    )
                },
                btn2: function () {
                    layer.close(layer.index);
                }
            })
        } else if (obj.event === 'disable'){
            var id = obj.data.id;
            layer.confirm('确定要禁用吗', {
                btn: ['确定', '取消'],
                btn1: function () {
                    $.ajax(
                        {
                            url: '/dbmonitor/mysqldb_stop/',
                            type: 'POST',
                            data: {"mysql_id": id},
                            success: function (data) {
                                layer.close(layer.index);
                                window.location.reload();
                            }
                        }
                    )
                },
                btn2: function () {
                    layer.close(layer.index);
                }
            })
        } else if (obj.event === 'enable'){
            var id = obj.data.id;
            layer.confirm('确定要启用吗', {
                btn: ['确定', '取消'],
                btn1: function () {
                    $.ajax(
                        {
                            url: '/dbmonitor/mysqldb_start/',
                            type: 'POST',
                            data: {"mysql_id": id},
                            success: function (data) {
                                layer.close(layer.index);
                                window.location.reload();
                            }
                        }
                    )
                },
                btn2: function () {
                    layer.close(layer.index);
                }
            })
        }
        ///
    });





});

</script>
</body>
</html>